/* eslint-disable react/jsx-no-bind */
import { WithLibra } from 'integrations/src/libra'

import { BrowserCommandClient } from '@slardar/web'

function addTest(testName: string) {
  const client = window.SdkClient as WithLibra<BrowserCommandClient>
  client.libra?.addTest(testName)
}

function removeTest(testName: string) {
  const client = window.SdkClient as WithLibra<BrowserCommandClient>
  client.libra?.removeTest(testName)
}

function clearTest() {
  const client = window.SdkClient as WithLibra<BrowserCommandClient>
  client.libra?.clearTest()
}

function report(name: string) {
  const client = window.SdkClient as typeof window.SdkClient
  client.report({
    ev_type: 'custom',
    payload: {
      type: 'event',
      name,
    },
    common: {},
  })
}

function send(name: string) {
  const client = window.SdkClient as typeof window.SdkClient
  client.getSender()?.send({
    ev_type: 'custom',
    payload: {
      type: 'event',
      name,
    },
    common: {},
  })
}

function setWait(wait: number) {
  const client = window.SdkClient as typeof window.SdkClient
  client.getSender()?.setWait(wait)
}

function setSizeInfinity() {
  const client = window.SdkClient as typeof window.SdkClient
  client.getSender()?.setSize(Infinity)
}

export const Libra = () => {
  return (
    <>
      <button id="libra-addTest-test1" onClick={() => addTest('test1')}>
        libra-addTest-test1
      </button>
      <button id="libra-addTest-test2" onClick={() => addTest('test2')}>
        libra-addTest-test2
      </button>
      <button id="libra-addTest-test3" onClick={() => addTest('test3')}>
        libra-addTest-test3
      </button>
      <button id="libra-removeTest-test1" onClick={() => removeTest('test1')}>
        libra-removeTest-test1
      </button>
      <button id="libra-removeTest-test2" onClick={() => removeTest('test2')}>
        libra-removeTest-test2
      </button>
      <button id="libra-clearTest" onClick={() => clearTest()}>
        libra-clearTest
      </button>
      <button id="libra-report-name1" onClick={() => report('1')}>
        libra-report-name1
      </button>
      <button id="libra-report-name2" onClick={() => report('2')}>
        libra-report-name2
      </button>
      <button id="libra-report-name3" onClick={() => report('3')}>
        libra-report-name3
      </button>
      <button id="libra-send-name4" onClick={() => send('4')}>
        libra-send-name4
      </button>
      <button id="libra-send-name5" onClick={() => send('5')}>
        libra-send-name5
      </button>
      <button id="libra-send-name6" onClick={() => send('6')}>
        libra-send-name6
      </button>
      <button id="setWait1000" onClick={() => setWait(1000)}>
        setWait1000
      </button>
      <button id="setSizeInfinity" onClick={setSizeInfinity}>
        setSizeInfinity
      </button>
    </>
  )
}
